<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning" style="margin-bottom: 100px">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="6">
            <a-col :md="6" :sm="12">
              <a-form-item label="查询日期">
                <a-range-picker style="width: 100%" :show-time="{ format: 'YYYY-MM-DD HH:mm:ss' }" v-model="regTime" :placeholder="['开始时间', '结束时间']" @change="timeChange" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="品牌">
                <a-select v-model="queryParam.brandId" placeholder="请选择品牌" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option v-for="(item, index) in publishList" :key="index" :value="item.arcBrandId">{{ item.brandName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="sord" slot-scope="text, record, index">
          {{ (pageNo - 1) * pageSize + index + 1 }}
        </span>
        <span slot="skcOneBrand" slot-scope="text">
          {{ text | skcOne(publishList) }}
        </span>
        <span slot="skcTwoBrand" slot-scope="text">
          {{ text | skcTwo(publishList) }}
        </span>
        <span slot="makeSku" slot-scope="record"> {{ record.skcOne }}{{ record.skcTwo }} </span>
        <span slot="skcOneProductImg" slot-scope="record">
          <img :src="record.skcOneProductImg" style="width: 80px; height: 80px" />
        </span>
        <span slot="skcTwoProductImg" slot-scope="record">
          <img :src="record.skcTwoProductImg" style="width: 80px; height: 80px" />
        </span>
      </s-table>
    </a-spin>
  </a-card>
</template>
<script>
import { STable } from '@/views/box/components'
import { getTopFiftyData, brandCondition } from '@/api/box/boxLook'
const columns = [
  {
    title: '排序',
    align: 'center',
    scopedSlots: { customRender: 'sord' }
  },
  {
    title: '连带商品组合',
    align: 'center',
    scopedSlots: { customRender: 'makeSku' }
  },
  {
    title: '商品1名称',
    align: 'center',
    dataIndex: 'skcOneProductName'
  },
  {
    title: '商品1品牌',
    align: 'center',
    scopedSlots: { customRender: 'skcOneBrand' }
  },
  {
    title: '商品1主图',
    align: 'center',
    scopedSlots: { customRender: 'skcOneProductImg' }
  },
  {
    title: '商品2名称',
    align: 'center',
    dataIndex: 'skcTwoProductName'
  },
  {
    title: '商品2品牌',
    align: 'center',
    scopedSlots: { customRender: 'skcTwoBrand' }
  },
  {
    title: '商品2主图',
    align: 'center',
    scopedSlots: { customRender: 'skcTwoProductImg' }
  },
  {
    title: '连带订单数',

    align: 'center',
    dataIndex: 'orderCount'
  }
]
export default {
  components: {
    STable
  },
  data() {
    return {
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      spinning: false,
      publishList: [],
      regTime: [],
      queryParam: {},
      pageSize: 0,
      pageNo: 0,
      loadData: parameter => {
        const data = {
          requestData: {
            ...this.queryParam
          },
          page: {
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize
          }
        }

        return getTopFiftyData(data).then(res => {
          if (res.code === 0) {
            const data = res
            // this.pageSize = res.page.pageSize
            // this.pageNo = res.page.pageNo

            return data
          } else {
            this.$message.error(res.msg || res.message)

            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    this.postBrand()
  },
  filters: {
    skcOne(text, publishList) {
      let list = publishList.filter(e => e.arcBrandId == text.skcOneBrand)
      return list.length > 0 ? list[0].brandName : text.skcOneBrand
    },
    skcTwo(text, publishList) {
      let list = publishList.filter(e => e.arcBrandId == text.skcTwoBrand)
      return list.length > 0 ? list[0].brandName : text.skcTwoBrand
    }
  },
  methods: {
    postBrand() {
      brandCondition().then(res => {
        if (res.code === 0) {
          console.log(res, 'res')
          this.publishList = res.data
        }
      })
    },
    search() {
      this.$refs.table.refresh(true)
    },
    reset() {
      this.regTime = []
      this.queryParam = []
      this.$refs.table.refresh(true)
    },
    timeChange(dates, dateString) {
      this.queryParam.createTimeStart = dateString[0]
      this.queryParam.createTimeEnd = dateString[1]
    }
  }
}
</script>
<style scoped lang="less">
</style>
